<script setup lang="ts">
  import { computed } from 'vue';
  import { createReusableTemplate } from '@vueuse/core';
  import { $t } from '@/locales';

  defineOptions({
    name: 'CardData',
  });

  interface CardData {
    key: string;
    title: string;
    value: number;
    unit: string;
    color: {
      start: string;
      end: string;
    };
    icon: string;
  }
  interface Props {
    data: any;
  }
  const props: any = defineProps<Props>();
  const cardData = computed<CardData[]>(() => [
    {
      key: 'userTotal',
      title: $t('page.home.downloadCount'),
      value: props.data?.userTotal ?? 0,
      unit: '',
      color: {
        start: '#ec4786',
        end: '#b955a4',
      },
      icon: 'mdi:account-group',
    },
    {
      key: 'generateTotal',
      title: $t('page.home.registerCount'),
      value: props.data?.generateTotal ?? 0,
      unit: '', // 前缀
      color: {
        start: '#865ec0',
        end: '#5144b4',
      },
      icon: 'solar:airbuds-case-open-bold',
    },
    {
      key: 'soundEffectTotal',
      title: $t('page.home.visitCount'),
      value: props.data?.soundEffectTotal ?? 0,
      unit: '',
      color: {
        start: '#56cdf3',
        end: '#719de3',
      },
      icon: 'mingcute:airpods-fill',
    },
    {
      key: 'marketVoiceTotal',
      title: $t('page.home.dealCount'),
      value: props.data?.marketVoiceTotal ?? 0,
      unit: '',
      color: {
        start: '#fcbc25',
        end: '#f68057',
      },
      icon: 'solar:airbuds-case-bold',
    },
  ]);

  interface GradientBgProps {
    gradientColor: string;
  }

  const [DefineGradientBg, GradientBg] =
    createReusableTemplate<GradientBgProps>();

  function getGradientColor(color: CardData['color']) {
    return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
  }
</script>

<template>
  <NCard :bordered="false" size="small" class="card-wrapper">
    <!-- define component start: GradientBg -->
    <DefineGradientBg v-slot="{ $slots, gradientColor }">
      <div
        class="rd-8px px-16px pb-4px pt-8px text-white"
        :style="{ backgroundImage: gradientColor }"
      >
        <component :is="$slots.default" />
      </div>
    </DefineGradientBg>
    <!-- define component end: GradientBg -->

    <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
      <NGi v-for="item in cardData" :key="item.key">
        <GradientBg
          :gradient-color="getGradientColor(item.color)"
          class="flex-1"
        >
          <h3 class="text-16px">{{ item.title }}</h3>
          <div class="flex justify-between pt-12px">
            <SvgIcon :icon="item.icon" class="text-32px" />
            <CountTo
              :prefix="item.unit"
              :start-value="1"
              :end-value="item.value"
              class="text-30px text-white dark:text-dark"
            />
          </div>
        </GradientBg>
      </NGi>
    </NGrid>
  </NCard>
</template>

<style scoped></style>
